<%@ page language="java" isELIgnored="false"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />

<link href="${pageContext.request.contextPath}/css/report/TimeReporting.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet"	href="${pageContext.request.contextPath}/jqwidgets/styles/jqx.base.css"	type="text/css" />
<link href="${pageContext.request.contextPath}/css/common.css"	rel="stylesheet" type="text/css" />

<link href="${pageContext.request.contextPath}/css/datepicker/jquery-ui-1.8.21.custom-redmond.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" 	src="${pageContext.request.contextPath}/scripts/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript"	src="${pageContext.request.contextPath}/scripts/jquery-ui-timepicker-addon.js"></script>

<script type="text/javascript"	src="${pageContext.request.contextPath}/jqwidgets/jqxdata.js"></script>

<!-- Text box search -->
<style type="text/css">
.search .searchFormPanel_input_text {
	padding-bottom: 2px;
}
</style>
<!-- End text box search -->

<!-- Date time picker-->
<style type="text/css">
/* css for timepicker */
.ui-timepicker-div .ui-widget-header {
	margin-bottom: 8px;
}

.ui-timepicker-div dl {
	text-align: left;
}

.ui-timepicker-div dl dt {
	height: 20px;
	margin-bottom: -25px;
}

.ui-timepicker-div dl dd {
	margin: 0 10px 10px 65px;
}

.ui-timepicker-div td {
	font-size: 40%;
}

.ui-tpicker-grid-label {
	background: none;
	border: none;
	margin: 0;
	padding: 0;
}
</style>
<!-- End date time picker -->
<script type="text/javascript">
	$(document).ready(function() {
		$('#fromDate').datepicker({});
		$('#toDate').datepicker({});
		var theme = getTheme();
		
		//dropdownlist member
		var userSource = {
			datatype : "json",
			datafields : [ {
				name : 'username'
			}, {
				name : 'id'
			} ],
			id : 'id',
			url : "<c:url value='/ajax/project/1/users'/>",
			async : false
		};
		var userDataAdapter = new $.jqx.dataAdapter(userSource);
		$("#memberHour").jqxDropDownList({
			source : userDataAdapter,
			displayMember : 'username',
			valueMember : 'id',
			width : '150',
			height : '25',
			selectedIndex : 0,
			theme : theme,
			autoDropDownHeight : true
		});

		// dropdownlist project
		var projectSource = {
				datatype : "json",
				datafields : [ {name : 'name'},
				               {name : 'id'	} ],
				id : 'id',
				url : "<c:url value='/ajax/project/search'/>",
				async : false
			};
			var projectDataAdapter = new $.jqx.dataAdapter(projectSource);
		$("#projectReport").jqxDropDownList({
			source : projectDataAdapter,
			displayMember : 'name',
			valueMember : 'id',
			width : '200',
			height : '25',
			selectedIndex : 0,
			theme : theme,
			autoDropDownHeight : true
		}); 
	});
	function getIdDropdownList(name){
		var ddlName = '#' + name;
        var item = $(ddlName).jqxDropDownList('getSelectedItem');
        if (item != null) {
            return item.value;
        }
	}
	function createReport (){
		var member = getIdDropdownList('memberHour');
		var project= getIdDropdownList('projectReport');
		var fromDate = document.getElementById("fromDate").value;
		var toDate = document.getElementById("toDate").value;
		
		if (Date.parse(fromDate) > Date.parse(toDate)){
			alert("From Date must smaller To Date...\nPlease try again.");
		}
		else if(fromDate == ""){
			alert("From Date not must blank...\nPlease try again.");
		}
		else if(toDate == ""){
			alert("To Date not must blank...\nPlease try again.");
		} 
		else{
			$.ajax({
	            url : '${pageContext.request.contextPath}/ajax/report/create',
	            type : "POST",
	            data: {
	            	member: member,
	            	project: project,
	            	fromDate: fromDate,
	            	toDate: toDate 
	            },
	            dataType : "html",
	            beforeSend : function() {
	            	$('#imgSpinnerContainerPopup').show();
	            },
	            complete : function() {
	            	$('#imgSpinnerContainerPopup').hide();
	            },
	            success : function(data) {
	            	//alert(data);
	                  $('#contentList').html(data);
	            },
	            error : function() {
	               alert("Failure args: " + arguments);
	            }
	         });
		}
	}
</script>
<div class="cubeTitleWrapper">
	<span class="cube_title">SharedWorkspaces</span> <span class="wklinks">
		<span class="settings"><a href="">Settings</a></span>
	</span>
</div>

<div class="cube">
	<div class="contentwrapper">
		<div class="innertube innertubeCube full">
			<div>
				<h2 class="userDefinedBg">
					<span class="right_end"><span class="start"><span>Time tracking reports</span></span></span>
				</h2>
			</div>
			<div class="contentBlock">
				<div class="title">Task time reports</div>
				<div>
					<div
						style="width: 0px; height: 0px; position: absolute; left: -100px; top: -100px; overflow: hidden">
						<input name="createReportForm4b3_hf_0"
							id="createReportForm4b3_hf_0" type="hidden">
					</div>
					<div></div>
					<table class="reportForm">
						<tbody>
							<tr class="heading">
								<td colspan="" class="members">Show Member's hours</td>
								<td class="from">From</td>
								<td class="to">To</td>
								<td>Project</td>
							</tr>
							<tr>
								<td class="members">
									<div style="width: 203px;" id="memberHour">
									</div>
								</td>
								<td class="from"><input style="height: 25px; font-size: 13px; text-align: center; font-weight: bold;" id="fromDate" type="text"></td>
								<td class="to"><input style="height: 25px; font-size: 13px; text-align: center; font-weight: bold;" id="toDate" type="text"></td>
								<td>
									<div style="width: 203px;" id="projectReport">
									</div>
								</td>
								<td><a class="gcSubmit" href="#" onclick="createReport();">
										Create Report
										<span class="left"></span> 
										<span class="right"></span>
										<span>&nbsp;<img id="imgSpinnerContainerPopup" style="display: none;" src="${pageContext.request.contextPath}/images/loading.gif"></span>
								</a></td>
							</tr>
						</tbody>
					</table>
				</div>
				<br>
				<br>
					<div id="contentList">
						<%@include file="controls/c_timeTrackingReport.jsp" %>
					</div>
			</div>
			<div class="contentBlock_bottom">
				<span class="right_end"><span></span></span>
			</div>
		</div>
	</div>
</div>
